<template>
  <el-form label-position="top" :rules="formRules" :model="form" ref="formDom" class="login-form">
    <el-form-item class="login-title"> 歡迎登錄smoothfinch </el-form-item>
    <el-form-item label="郵箱號" prop="email" class="login-item email">
      <el-input type="text" v-model.trim="form.email" autocomplete="off" placeholder="請輸入郵箱"></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="password" class="login-item password">
      <el-input type="password" v-model.trim="form.password" autocomplete="off" :show-password="true"
        placeholder="請輸入密碼"></el-input>
    </el-form-item>
    <el-form-item label="谷歌驗證器" prop="googleCode" class="login-item validate-code">
      <el-input type="text" v-model.trim="form.googleCode" autocomplete="off" placeholder="請輸入驗證碼"></el-input>
    </el-form-item>
    <el-form-item class="login-item login-btn">
      <el-button style="width: 100%" type="primary" @click="onClickSubmitForm" :loading="loading">登錄</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { useLogin } from "@/hooks/index";

const formDom = ref(null);
const { loading, form, formRules, submitForm } = useLogin();


// 点击提交表单
const onClickSubmitForm = () => {
  submitForm(formDom);
}

</script>


<style lang="scss" scoped>
.login-form {
  margin-top: 80px;

  :deep(.login-title) {
    .el-form-item__content {
      color: #3D3D3D;
      font-weight: bold;
      font-size: 36px;
      margin-bottom: 53px;
    }
  }

  :deep(.login-item) {
    .el-form-item__label {
      color: #3D3D3D;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 15px;
    }

    .el-form-item__content {
      width: 460px;

      .el-input__wrapper {
        border-radius: 8px;
        background: #EDEDED;

        .el-input__inner {
          height: 44px;
        }
      }
    }

    &.email {
      margin-bottom: 51px;
    }

    &.password {
      position: relative;
      margin-bottom: 51px;
      .el-form-item__content {
        .el-input__wrapper {
          padding-right: 40px;

          .el-input__suffix {
            position: absolute;
            right: 1vw;
          }
        }
      }

      .eye-icon {
        position: absolute;
        right: 16px;
        font-size: 6px;
        cursor: pointer;
      }

      .forget-password {
        position: absolute;
        right: 0px;
        font-size: 14px;
        color: #3D5DC7;
        bottom: -35px;
        cursor: pointer;
        user-select: none;
      }
    }

    &.validate-code {
      margin-bottom: 75px;
    }

    &.login-btn {
      .el-button {
        width: 460px;
        height: 61px;
        line-height: 61px;
        border-radius: 8px;
        background: #2FC2AF;
        font-size: 24px;
        color: #fff;
        font-weight: bold;
      }

      .register-tip {
        margin-top: 28px;
        color: #B0B0B0;
        font-size: 18px;
        width: 100%;
        text-align: center;
        user-select: none;

        a {
          cursor: pointer;
          color: #3D5DC7;
        }
      }
    }
  }
}
</style>